import { Empty, Spin } from 'antd';
import dynamic from 'next/dynamic';
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import ChartSelection2 from '../components/ChartSelection2';
import CardTemplate2 from '../components/templates/CardTemplate2';
import { ChartType, onCardClick } from '../libs/chartCommon';
import { refineFilterCondition } from '../libs/filterCommon';
import useCustomQuery from '../libs/hooks/useCustomQuery';
import useFilterMeta from '../libs/hooks/useFilterMeta';
import useSaLogging from '../libs/hooks/useSaLogging';
import { selectFilter } from '../libs/slices/filterSlice';

const ChartSelection = dynamic(() => import('../components/ChartSelection'));
const CardTemplate = dynamic(() => import('../components/templates/CardTemplate'));

export type DetailCardWrapperNoSubFilterProps2 = {

  data: { [key: string]: string | number }[];
};

function DetailCardWrapperNoSubFilter2({

  data
}: DetailCardWrapperNoSubFilterProps2) {
  const { catalog } = useFilterMeta();
  const selectedFilter = useSelector(selectFilter);
  const { saEvent } = useSaLogging();

  const condition = useMemo(() => {
    return refineFilterCondition(selectedFilter, catalog);
  }, [selectedFilter]);


  const chartComponent = useMemo(() => {
    if (!data) return <Empty />;
    if (data) {
      return (
        <ChartSelection2
          data={data}
        />
      );
    }
    return <Spin />;
  }, [data]);
  return (
    <CardTemplate2
      isdashboard={false}
      title={'搜索结果'}
      content={chartComponent}
      onClick={event => onCardClick(event, data, saEvent, catalog)}
      showSubfilter={false}
    />
  );
}

export default DetailCardWrapperNoSubFilter2;
